light mode
night mode
অ্যাঙ্গুলার হাই চার্ট (Angular High Charts)
Angular এবং Highcharts পরিচিতি Angular কি? Highcharts কি? Highcharts কেন ব্যবহার করবেন? Angular এবং Highcharts এর ইন্টিগ্রেশন এর প্রয়োজনীয়তা Angular প্রজেক্ট সেটআপ Angular CLI দিয়ে নতুন প্রজেক্ট তৈরি করা প্রজেক্ট স্ট্রাকচার ব্যাখ্যা Node.js এবং npm ইনস্টল করা Angular CLI এর সাধারণ কমান্ডগুলো Highcharts লাইব্রেরি ইন্টিগ্রেশন Highcharts লাইব্রেরি ইনস্টল করা (npm দিয়ে) Highcharts Angular র‍্যাপার ইনস্টল করা প্রয়োজনীয় মডিউল ইমপোর্ট করা বেসিক চার্ট তৈরি করার জন্য কম্পোনেন্ট তৈরি করা বেসিক Highcharts চার্ট তৈরি করা Highcharts এর সাথে ডেটা কনফিগারেশন চার্টের প্রকারভেদ (Line, Bar, Pie, Column ইত্যাদি) চার্টের শিরোনাম, এক্সিস এবং লেবেল কনফিগারেশন ডায়নামিক ডেটা দিয়ে চার্ট আপডেট করা চার্টের অপশন এবং কাস্টমাইজেশন চার্ট থিম এবং স্টাইল পরিবর্তন চার্টের বিভিন্ন উপাদান কাস্টমাইজ করা (লেজেন্ড, টুলটিপ, সিরিজ) চার্টের অ্যাক্সিস কাস্টমাইজেশন (xAxis, yAxis) সিরিজের ডেটা এবং টুলটিপ কাস্টমাইজেশন উন্নত চার্ট অপশনসমূহ Multi-series চার্ট তৈরি করা Drilldown চার্ট ইমপ্লিমেন্ট করা Highstock ব্যবহার করে সময়ভিত্তিক ডেটা প্রদর্শন করা Highmaps ব্যবহার করে ম্যাপভিত্তিক চার্ট তৈরি করা ইন্টারঅ্যাকটিভ চার্ট তৈরি করা চার্টের ইভেন্ট হ্যান্ডলার কনফিগার করা ক্লিক, হোভার এবং অন্যান্য ইভেন্ট হ্যান্ডলিং চার্টে Zoom এবং Panning ফিচার যুক্ত করা চার্ট রিসাইজ এবং রেসপন্সিভ ডিজাইন API এবং ডেটা সোর্স ইন্টিগ্রেশন External API থেকে ডেটা লোড করা Real-time ডেটা আপডেটের জন্য WebSocket ব্যবহার করা Highcharts এর সাথে API এর মাধ্যমে ডায়নামিক ডেটা লোড করা JSON/REST API ব্যবহার করে ডেটা ইন্টিগ্রেশন Performance অপ্টিমাইজেশন Highcharts এর পারফরম্যান্স অপ্টিমাইজেশন টেকনিক বড় ডেটাসেটের সাথে কাজ করা Lazy loading ব্যবহার করা চার্টের পারফরম্যান্স টিউনিং টিপস Highcharts এর প্লাগইন এবং এক্সটেনশনস Highcharts এর জন্য বিভিন্ন প্লাগইন ব্যবহার ডেটা এক্সপোর্ট এবং প্রিন্টিং ফিচার Highcharts এর এক্সটেনশনস (Highstock, Highmaps, Gantt) Highcharts ড্যাশবোর্ড তৈরি কাস্টম চার্ট তৈরি করা Highcharts এর কাস্টম চার্ট ডিজাইন করা কাস্টম রেন্ডারিং লজিক যুক্ত করা চার্টের ডায়নামিক স্টাইল পরিবর্তন করা Highcharts টেমপ্লেট ও ডায়নামিক ডেটা বাইন্ডিং Angular এর টেমপ্লেট এবং ডেটা বাইন্ডিং ব্যবহার ngFor এবং ngIf এর মাধ্যমে ডায়নামিক চার্ট তৈরি করা চার্টের ডেটা আপডেট এবং রিফ্রেশ করা ডিবাগিং এবং টেস্টিং Highcharts ডিবাগ করা কমন ত্রুটির সমাধান Angular এর ইউনিট টেস্টিং ফ্রেমওয়ার্ক ব্যবহার করে Highcharts টেস্টিং End-to-End টেস্টিং (Protractor, Cypress) Deployment এবং Production Setup প্রোডাকশনের জন্য Angular এবং Highcharts অ্যাপ্লিকেশন বিল্ড করা Webpack এবং AOT (Ahead-of-Time) কম্পাইলেশন ব্যবহার Performance অপ্টিমাইজেশনের জন্য Minification এবং Bundling AWS, Firebase, বা অন্য কোন সার্ভারে অ্যাপ্লিকেশন ডিপ্লয় করা Highcharts এর এডভান্সড ফিচারসমূহ Highcharts Boost Module ব্যবহার করে বড় ডেটা ভিজ্যুয়ালাইজেশন Highcharts Heatmaps তৈরি Sankey এবং TreeMap চার্ট তৈরি Highcharts Solid Gauge চার্ট ইমপ্লিমেন্ট করা

AWS, Firebase, বা অন্য কোন সার্ভারে অ্যাপ্লিকেশন ডিপ্লয় করা

Web Development - অ্যাঙ্গুলার হাই চার্ট (Angular High Charts) - Deployment এবং Production Setup |

Angular এবং Highcharts ব্যবহার করে তৈরি করা অ্যাপ্লিকেশনকে আপনি বিভিন্ন সার্ভারে ডিপ্লয় করতে পারেন। এই টিউটোরিয়ালে আমরা দেখব কিভাবে Angular অ্যাপ্লিকেশন ডিপ্লয় করা যায় AWS (Amazon Web Services), Firebase, এবং অন্য সাধারণ সার্ভারে।

1. Angular অ্যাপ্লিকেশন প্রস্তুত করা

এটি নিশ্চিত করতে হবে যে অ্যাপ্লিকেশনটি প্রোডাকশনের জন্য প্রস্তুত রয়েছে এবং আপনি ডিপ্লয় করার জন্য একটি প্রোডাকশন বিল্ড তৈরি করেছেন।

Angular প্রোডাকশন বিল্ড তৈরি করতে:

ng build --prod

এই কমান্ডটি আপনার অ্যাপ্লিকেশনের মিনিফাইড এবং অপটিমাইজড ভার্সন তৈরি করবে এবং dist/ ফোল্ডারে সেই ফাইলগুলি সংরক্ষণ করবে, যা আপনি সার্ভারে ডিপ্লয় করতে পারবেন।

2. AWS (Amazon Web Services) এ Angular অ্যাপ্লিকেশন ডিপ্লয় করা

AWS-এ Angular অ্যাপ্লিকেশন ডিপ্লয় করার জন্য Amazon S3 এবং CloudFront এর মাধ্যমে আপনি সহজে স্ট্যাটিক ওয়েবসাইট হোস্ট করতে পারেন।

পদক্ষেপ:

  1. S3 Bucket তৈরি করুন:
    • AWS কনসোল এ লগ ইন করুন এবং S3 সার্ভিসটি খুঁজে বের করুন।
    • একটি নতুন Bucket তৈরি করুন, এবং static website hosting অপশনটি নির্বাচন করুন।
    • Bucket এর নাম দিন এবং এটি পাবলিক হোস্টিং সক্ষম করুন।
  2. Angular Build ফাইল আপলোড করুন:
    • আপনার অ্যাপ্লিকেশনের প্রোডাকশন বিল্ড ফাইলগুলি (যেগুলি dist/ ফোল্ডারে রয়েছে) S3 Bucket এ আপলোড করুন।
    • Bucket এ index.html এবং অন্যান্য স্ট্যাটিক ফাইলগুলি সঠিকভাবে আপলোড হতে হবে।
  3. Bucket Permissions সেট করুন:
    • Bucket এর Permissions এ গিয়ে Bucket Policy যোগ করুন যাতে অ্যাপ্লিকেশনটি পাবলিকলি অ্যাক্সেসযোগ্য হয়।
  4. CloudFront CDN সেটআপ:
    • আপনার S3 Bucket কে CloudFront এর মাধ্যমে সার্ভ করার জন্য একটি CloudFront Distribution তৈরি করুন।
    • CloudFront সেটআপ শেষে আপনাকে একটি ডোমেইন নাম দেওয়া হবে, যা দিয়ে অ্যাপ্লিকেশনটি অ্যাক্সেস করতে পারবেন।

3. Firebase Hosting এ Angular অ্যাপ্লিকেশন ডিপ্লয় করা

Firebase Hosting একটি দ্রুত এবং সহজ মাধ্যম Angular অ্যাপ্লিকেশন ডিপ্লয় করার জন্য। Firebase আপনার অ্যাপ্লিকেশনকে স্ট্যাটিক ওয়েবসাইট হিসেবে হোস্ট করতে পারে।

পদক্ষেপ:

  1. Firebase CLI ইনস্টল করুন:

    Firebase CLI ইনস্টল করতে নিচের কমান্ডটি ব্যবহার করুন:

    npm install -g firebase-tools
  2. Firebase প্রজেক্ট তৈরি করুন:
    • Firebase Console এ গিয়ে একটি নতুন প্রজেক্ট তৈরি করুন।

  3. Firebase CLI লগইন করুন:

    Firebase CLI এর মাধ্যমে Firebase এ লগইন করতে নিচের কমান্ডটি ব্যবহার করুন:

    firebase login

  4. Angular অ্যাপ্লিকেশন Firebase Hosting এর জন্য সেটআপ করুন:

    Firebase CLI ব্যবহার করে অ্যাপ্লিকেশনটি সেটআপ করতে:

    firebase init
    • Hosting নির্বাচন করুন এবং dist/ ফোল্ডারের পথ সেট করুন (যেহেতু Angular এর প্রোডাকশন বিল্ড এই ফোল্ডারে থাকে)।

  5. অ্যাপ্লিকেশন ডিপ্লয় করুন:

    আপনার অ্যাপ্লিকেশন Firebase Hosting এ ডিপ্লয় করার জন্য:

    firebase deploy

    ডিপ্লয় করার পর Firebase একটি URL প্রদান করবে, যা দিয়ে আপনার অ্যাপ্লিকেশন অ্যাক্সেস করতে পারবেন।

4. অন্যান্য সার্ভারে Angular অ্যাপ্লিকেশন ডিপ্লয় করা

Netlify এ Angular অ্যাপ্লিকেশন ডিপ্লয় করা:

Netlify হল একটি জনপ্রিয় সার্ভিস যা Angular অ্যাপ্লিকেশন সহজে হোস্ট করতে পারে। Netlify সাইটের মাধ্যমে ডিপ্লয় করতে:

  1. Netlify অ্যাকাউন্ট তৈরি করুন: Netlify সাইটে গিয়ে একটি অ্যাকাউন্ট তৈরি করুন।
  2. GitHub রিপোজিটরি সংযোগ করুন: Netlify-কে আপনার GitHub অ্যাকাউন্টের সাথে সংযুক্ত করুন এবং আপনার অ্যাপ্লিকেশন রিপোজিটরি নির্বাচন করুন।
  3. Build Command এবং Publish Directory সেট করুন:
    • Build Command: ng build --prod
    • Publish Directory: dist/
  4. ডিপ্লয় করুন: Netlify আপনাকে একটি ডোমেইন নাম দিবে, যার মাধ্যমে অ্যাপ্লিকেশনটি পাবলিকভাবে অ্যাক্সেসযোগ্য হবে।

GitHub Pages এ Angular অ্যাপ্লিকেশন ডিপ্লয় করা:

  1. GitHub রিপোজিটরি তৈরি করুন: GitHub এ একটি নতুন রিপোজিটরি তৈরি করুন।
  2. Angular অ্যাপ্লিকেশন GitHub রিপোজিটরিতে পুশ করুন: আপনার প্রোডাকশন বিল্ড ফাইলগুলি GitHub রিপোজিটরিতে পুশ করুন।
  3. GitHub Pages থেকে অ্যাপ্লিকেশন ডিপ্লয় করুন: GitHub Pages সেটিংসে গিয়ে master branch অথবা gh-pages branch থেকে পেজ হোস্টিং সক্ষম করুন।

সারাংশ

AWS, Firebase, এবং অন্যান্য সার্ভারে Angular অ্যাপ্লিকেশন ডিপ্লয় করা একটি সহজ প্রক্রিয়া। AWS S3 এবং CloudFront ব্যবহার করে স্ট্যাটিক ওয়েবসাইট হোস্ট করা যায়, Firebase Hosting ব্যবহার করে অ্যাপ্লিকেশন দ্রুত ডিপ্লয় করা সম্ভব এবং Netlify ও GitHub Pages এর মাধ্যমে অ্যাপ্লিকেশনকে ফ্রি হোস্ট করা যায়। Angular অ্যাপ্লিকেশন ডিপ্লয় করার মাধ্যমে আপনি আপনার প্রোডাকশন কোড লাইভ পরিবেশে প্রদর্শন করতে পারবেন এবং ব্যবহারকারীদের কাছে পৌঁছে দিতে পারবেন।

Content added By
Md Azizur Rahman

Read more

AWS, Firebase, বা অন্য কোন সার্ভারে অ্যাপ্লিকেশন ডিপ্লয় করা

or

Don't have an account? Register

Promotion